<template>
	<div class="trade">
		<div class="trade-title">
				<div class="total"><i class="iconfont" style="font-size: 2.5rem;color: #FFFFFF;padding: 1rem;">&#xe679;</i>交易中心</div>
				<div class="trade-title-box">
					<div class="last-title" v-for="(item,index) in tabsParam" :class="[nowIndex == index ? 'tabs-last-active' : '']" @click="toggleTabs(index)">
						<p v-if="index ===0" class="iconfont">&#xe6cf;</p>
						<p v-if="index ===1" class="iconfont">&#xe672;</p>
						<p v-if="index ===2" class="iconfont">&#xe62b;</p>
						<h3>{{item.name}}</h3>
					</div>
				</div>
			</div>
			<div class="tabs-content">
				<!--我要交易-->
				<div class="divTab" v-show="nowIndex===0">
					<div class="trade-show-tab">
						<mt-cell title="买入/卖出" to="/kbc/h5/MyTradeBuySole">
							<i slot="icon" class="iconfont" style="background:#FF4F2D;">&#xe625;</i>
						</mt-cell>
						
						<mt-cell title="行情图表" to="/kbc/h5/MyTradeChart">
							<i slot="icon" class="iconfont" style="background:#009BF7;">&#xe6ad;</i>
						</mt-cell>
<!--						
						<mt-cell title="行情图表" to="/kbc/h5/ImageDemo">
							<i slot="icon" class="iconfont" style="background:#009BF7;">&#xe6ad;</i>
						</mt-cell>-->
					</div>
				</div>
				<!--我的委托-->
				<div class="divTab" v-show="nowIndex===1">
					<div class="tabs-bar">
						<div class="tabs-bar-nav">
							<div class="tabs-tab" v-for="(item,index) in dTabsParam" :class="[dIndex == index ? 'tabs-active' : '']" @click="delegateToggleTabs(index)">
								{{item.name}}
							</div>
						</div>
					</div>
					<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore1">
					<div class="tabs-min-content">
						<div class="divTab" v-show="dIndex===0">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="items!=''" v-for="item in items">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>订单号：{{item.buyCode}}</h3>
											</div>
											<div class="right">
												<h3>买家：<font color="#F32043">{{item.userName}}</font></h3>
											</div>
										</div>	
										<div class="content">
											<div class="left">
												<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
											</div>
											<div class="right">
												<p>数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>时间：{{item.createTime}}</h3>
											</div>
											<div class="right">
												<h3>操作：<mt-button plain type="danger" size="small" v-on:click="buyCancel(item.id)">取 消</mt-button></h3>
											</div>
										</div>	
									</div>
								</li>
							</ul>
						</div>
						<div class="divTab" v-show="dIndex===1">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="items!=''" v-for="item in items">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>订单号：{{item.sellCode}}</h3>
											</div>
											<div class="right">
												<h3>买家：<font color="#F32043">{{item.userName}}</font></h3>
											</div>
										</div>	
										<div class="content">
											<div class="left">
												<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
											</div>
											<div class="right">
												<!--<p>已成交量：<font color="#00CC66">{{item.status}}</font></p>-->
												<p>数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>时间：{{item.createTime}}</h3>
											</div>
											<div class="right">
												<h3>操作：<mt-button plain type="danger" size="small" v-on:click="sellCancel(item.id)">取 消</mt-button></h3>
											</div>
										</div>	
									</div>
								</li>
							</ul>
						</div>
						<div class="divTab" v-show="dIndex===2">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="items!=''" v-for="item in items">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>订单号：{{item.sellCode}}</h3>
											</div>
											<div class="right">
												<h3>委托号：<font color="#F32043">{{item.id}}</font></h3>
											</div>
										</div>	
										<div class="content">
											<div class="left">
												<p>交易类型：<font color="#00CC66">{{item.matchingType}}</font></p>
												<p>会员账号：<font color="#F32043">{{item.userName}}</font></p>
											</div>
											<div class="right" v-if="item.matchingType=='买入'">
												<p>单价：<font color="#F32043">{{item.kbcPrice}}</font></p>
												<p>委托数量：<font color="#F32043">{{item.kbcNum}}</font></p>
											</div>
											<div class="right" v-else>
												<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
												<p>委托数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>时间：{{item.createTime}}</h3>
											</div>
											<div class="right">
												<h3>状态：<font color="#00CC66">{{reStatusValue(item.matchingStatus)}}</font></h3>
											</div>
										</div>	
									</div>
								</li>
							</ul>
						</div>
					</div>
				</mt-loadmore>
				</div>
				<!--我的成交-->
				<div class="divTab" v-show="nowIndex===2">
					<div class="tabs-bar">
						<div class="tabs-bar-nav">
							<div class="tabs-tab" v-for="(item,index) in doneTabsParam" :class="[doneIndex == index ? 'tabs-active' : '']" @click="doneToggleTabs(index)">
								{{item.name}}
							</div>
						</div>
					</div>
					<mt-loadmore :top-method="loadTop2" :bottom-method="loadBottom2" :bottom-all-loaded="allLoaded" ref="loadmore2">
					<div class="tabs-min-content">
						<div class="divTab" v-show="doneIndex===0">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="ditems!=''" v-for="item in ditems">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>流水号：{{item.buyCode}}</h3>
											</div>
											<div class="right">
												<h3>状态：<font color="#00CC66">{{getStatusValToBuy(item.matchingStatus)}}</font></h3>
											</div>
										</div>	
										<div class="content">
											<div class="left">
												<p>用户名：<font color="#00CC66">{{item.userName}}</font></p>
												<p>姓名：<font color="#00CC66">{{item.realName}}</font></p>
												<p>手机号：<font color="#00CC66">{{item.phone}}</font></p>
											</div>
											<div class="right">
												<p>匹配数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
												<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
												<p>金额：<font color="#00CC66">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>发布时间：{{item.createTime}}</h3>
											</div>
											<div class="right">
												<h3><mt-button type="default" size="normal" @click.native='go("/kbc/h5/TradeDetail",item,"buy")'>查看详情</mt-button></h3>
											</div>
										</div>	
										<!--<div class="bottom">
											<div class="left">
												<p><mt-button type="default" size="normal" @click.native="popupVisible2 = true">查看详细</mt-button></p>
											</div>
											<div class="right">
												<h3><mt-button type="danger" size="normal" @click.native="popupVisible1 = true">确认打款</mt-button></h3>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<p><mt-button type="default" size="normal" @click.native="popupVisible1 = true">查看详细</mt-button></p>
											</div>
											<div class="right">
												<h3><mt-button type="danger" size="normal">查看打款</mt-button></h3>
											</div>
										</div>-->
									</div>
								</li>
							</ul>
						</div>
						<div class="divTab" v-show="doneIndex===1">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="ditems!=''" v-for="item in ditems">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>流水号：{{item.sellCode}}</h3>
											</div>
											<div class="right">
												<h3>状态：<font color="#00CC66">{{getStatusValToSell(item.matchingStatus)}}</font></h3>
											</div>
										</div>	
										<div class="content">
											<div class="left">
												<p>用户名：<font color="#00CC66">{{item.userName}}</font></p>
												<p>姓名：<font color="#00CC66">{{item.realName}}</font></p>
												<p>手机号：<font color="#00CC66">{{item.phone}}</font></p>
											</div>
											<div class="right">
												<p>匹配数量：<font color="#00CC66">{{item.kbcNum}}</font></p>
												<p>单价：<font color="#00CC66">{{item.kbcPrice}}</font></p>
												<p>金额：<font color="#00CC66">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>发布时间：{{item.createTime}}</h3>
											</div>
											<div class="right">
												<h3><mt-button type="default" size="normal" @click.native='go("/kbc/h5/TradeDetail",item,"sell")'>查看详情</mt-button></h3>
											</div>
										</div>	
									</div>
								</li>
							</ul>
						</div>
						<div class="divTab" v-show="doneIndex===2">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="ditems!=''" v-for="item in ditems">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>流水号：{{item.sellCode}}</h3>
											</div>
											<!--<div class="right">
												<h3>状态：<font color="#00CC66">{{getStatusVal(1)}}</font></h3>
											</div>-->
										</div>	
										<div class="content" v-if="item.matchingType == '买入'">
											<div class="left">
												<p>操作：<font color="#F32043">买入</font></p>
												<p>买家编号：{{item.userName}}</p>
												<!--<p>卖家编号：{{item.sellUsername}}</p>-->
											</div>
											<div class="right">
												<p>KBC数量：<font color="#F32043">{{item.kbcNum}}</font></p>
												<p>单价：<font color="#F32043">{{item.kbcPrice}}</font></p>
												<p>合计：<font color="#F32043">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
											</div>
										</div>
										<div class="content" v-else>
											<div class="left">
												<p>操作：<font color="#2BAF4A">卖出</font></p>
												<!--<p>买家编号：{{item.buyUsername}}</p>-->
												<p>卖家编号：{{item.userName}}</p>
											</div>
											<div class="right">
												<p>KBC数量：<font color="#2BAF4A">{{item.kbcNum}}</font></p>
												<p>单价：<font color="#2BAF4A">{{item.kbcPrice}}</font></p>
												<p>合计：<font color="#2BAF4A">{{total(item.kbcNum,item.kbcPrice)}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>出售时间：{{item.createTime}}</h3>
											</div>
											<div class="right" v-if="item.matchingType == '买入'">
												<h3><mt-button type="default" size="normal" @click.native='go("/kbc/h5/DoneDetail",item,"buy")'>查看详情</mt-button></h3>
											</div>
											<div class="right" v-else>
												<h3><mt-button type="default" size="normal" @click.native='go("/kbc/h5/DoneDetail",item,"sell")'>查看详情</mt-button></h3>
											</div>
										</div>	
									</div>
								</li>
							</ul>
						</div>
						<div class="divTab" v-show="doneIndex===3">
							<ul class="table-min-box">
								<li v-if="isShow">
									<div class="no-data">
										暂无数据！
									</div>
								</li>
								<li v-if="ditems!=''" v-for="item in ditems">
									<div class="item-box">
										<div class="top">
											<div class="left">
												<h3>流水号：{{item.sequence}}</h3>
											</div>
											<!--<div class="right">
												<h3>状态：<font color="#00CC66">{{getStatusVal(1)}}</font></h3>
											</div>-->
										</div>	
										<div class="content"  v-if="item.buyUserid == memberId">
											<div class="left">
												<p>收支类型：<font color="#F32043">买入</font></p>
												<p>买家编号：{{item.buyUsername}}</p>
												<p>卖家编号：{{item.sellUsername}}</p>
											</div>
											<div class="right">
												<p>KBC数量：<font color="#F32043">{{item.dealNumber}}</font></p>
												<p>单价：<font color="#F32043">{{item.dealPrice}}</font></p>
												<p>合计：<font color="#F32043">{{total(item.dealNumber,item.dealPrice)}}</font></p>
											</div>
										</div>
										<div class="content"  v-else>
											<div class="left">
												<p>操作：<font color="#2BAF4A">卖出</font></p>
												<p>买家编号：{{item.buyUsername}}</p>
												<p>卖家编号：{{item.sellUsername}}</p>
											</div>
											<div class="right">
												<p>KBC数量：<font color="#2BAF4A">{{item.dealNumber}}</font></p>
												<p>单价：<font color="#2BAF4A">{{item.dealPrice}}</font></p>
												<p>合计：<font color="#2BAF4A">{{total(item.dealNumber,item.dealPrice)}}</font></p>
											</div>
										</div>
										<div class="bottom">
											<div class="left">
												<h3>出售时间：{{item.createTime}}</h3>
											</div>
											<!--<div class="right">
												<h3><mt-button type="default" size="normal" @click.native='go("/kbc/h5/RecordDetail",item)'>查看详情</mt-button></h3>
											</div>-->
										</div>	
									</div>
								</li>
							</ul>
						</div>
					</div>
				</mt-loadmore>
				</div>
			</div>
			<mt-popup v-model="popupVisible1" popup-transition="popup-fade" class="mint-popup-1" closeOnClickModal="false">
				<div class="mint-popup-title" style="border-bottom: 1px solid #CECECE;height: 40px;text-align: center;line-height: 40px;">
					收款人信息
				</div>
				<div class="mint-popup-main">
					<div class="mint-popup-content">
						<h1>订单号：201801291517158760</h1>
					    <p>卖家帐号：test</p>
					    <p>收款银行：中国银行</p>
					    <p>支付宝帐号：sddsds</p>
					    <p>收款帐号:622224242422424242</p>
					    <p>卖家联系方式：138000000000</p>
					    <p>收款支行：中国银行贵阳支行</p>
					    <p>微信帐号：2222</p>
					    <p>金额：2000.00元</p>
					</div>
					<p style="font-weight: 700;">打款凭证上传</p>
					<div class="mint-popup-img">
						<!--<img src="../../../kbc/h5/img/css/index/160926181522464.jpg" />-->
						<img src="../../../kbc/h5/img/css/index/upload.jpg" class="pic"/>
			       	  	<img :src="isImage" v-if="isImage" class="pic">
					    <input type="file" class="form-choose" accept="image/jpeg,image/jpg,image/png" multiple=true @change="onFileChange">
					</div>
					<div class="mint-popup-btn">
						<div class="cancel">
							<mt-button type="default" size="normal" @click.native="popupVisible1 = false">取 消</mt-button>
						</div>
						<div class="sure">
							<mt-button type="danger" size="normal" @click.native="popCancel(12)">确认打款</mt-button>
						</div>
					</div>
				</div>
		    </mt-popup>
			<mt-popup v-model="popupVisible2" popup-transition="popup-fade" class="mint-popup-2" position="top">
				<div class="hello">
					<transition name="slide-fade" class="fadeView">
						<div v-if="show">
							<image-view :imgArr="imgArr" :showImageView="true" :imageIndex="imageIndex" v-on:hideImage="hideImageView"></image-view>
						</div>
					</transition>
					<h1 @click="showImgView">显示隐藏</h1>
					<img v-for="(item, index) in imgArr" :src="item" @click="selectImg(index)">
				</div>
			</mt-popup>
	</div>
</template>
<style>
	.trade {
		width: 100%;
		border-radius: 10px;
	}
	.trade .mint-popup-2{width: 100%;min-height: 200px;}
	.trade .mint-popup-1 {
		width: 85%;
		border-radius: 8px;
		min-height: 200px;
		z-index: 9999;
		/*transform: translate(-50%, 0);*/
	}
    .trade .mint-popup-1 .mint-popup-title{font-size: 1.3rem;}
    .trade .mint-popup-1 .mint-popup-main{padding: 10px;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-content{font-size: 1.2rem;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-content p{margin: 5px auto;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-img{width: 100%;height:100px;margin-top:10px;box-sizing: border-box;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-img .pic{width:90%; height: 100px;border: 5px solid #CECECE;position: absolute; bottom:4rem; left: 1rem;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-img .form-choose{position: absolute; bottom:5rem; left: 0;width:100%;height:100px; opacity: 0;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-btn{display: flex;margin:5px auto;text-align: center;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-btn .cancel{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.trade .mint-popup-1 .mint-popup-main .mint-popup-btn .sure{-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.trade .trade-title {
		position: fixed; 
		box-sizing: border-box;
		text-align: center;
		width: 100%;
		z-index: 1000;
		margin: 0 auto;
		padding: 10px 0 0 0;
		background: #00b2b5;
		color: #FFFFFF;
	}
	
	.trade .trade-title .total {
		width: 100%;
		font-size: 2rem;
		padding: 1rem 0 2rem 0;
		color: #FFFFFF;
	}
	
	.trade .mint-cell:before {
		content: " ";
		position: absolute;
		top: 3.1rem;
		right: 15px;
		display: block;
		width: 10px;
		height: 10px;
		border-top: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
		transform: rotate(45deg);
	}
	
	.trade .mtcell {
		margin-left: 9rem;
		position: absolute;
		right: 3.2rem;
		top: 11.0rem;
	}
	
	.trade .trade-title .trade-title-box {
		color: #FFFFFF;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}
	
	.trade .trade-title .trade-title-box .last-title {
		width: 50%;
		text-align: center;
		position: relative;
		padding: 5px;
		transition: transform 0.25s ease;
	}
	
	.trade .trade-title .trade-title-box .last-title h3 {
		font-size: 1.2rem;
		margin-bottom: 0.2rem;
	}
	
	.trade .trade-title .trade-title-box .last-title p {
		margin-top: 0.2rem;
		font-size: 1.8rem;
	}
	
	/*.trade .trade-title-box .last-title:before {
		content: " ";
		position: absolute;
		top: 1rem;
		left: 4px;
		display: block;
		width: 1px;
		height: 35px;
		border-left: 1px solid #d9d9d9;
	}*/
	.trade .trade-title .trade-title-box .tabs-last-active {
		width: 50%;
		text-align: center;
		position: relative;
		/*border-top: 1px solid #007AFF;
		border-left: 1px solid #007AFF;
		border-right: 1px solid #007AFF;*/
		z-index: 1999;
		padding: 5px;
		border: 1px solid #FFFFFF;
		background: #00b2b5;
		transform: scale(1.1,1.1);box-shadow: 0 0 50px #FFFFFF;
		/*border-top-left-radius: 5px;
		border-top-right-radius: 5px;*/
		/*background-color: #00b2b5;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;*/
	}
	
	.trade .trade-title .trade-title-box .tabs-last-active h3{
		font-size: 1.2rem;
		margin-bottom: 0.2rem;
		font-weight: 500;
	}
	.trade .trade-title .trade-title-box .tabs-last-active p{
		margin-top: 0.2rem;
		font-size: 1.8rem;
	}
	.trade .trade-title .tabs-content {
		width: 100%;
		box-sizing: border-box;
	}
	.trade .mint-cell:before{
		   content:" ";
		   position: absolute;
		   top:20px;
		   right:15px;
		   display: block;
		   width: 10px;
		   height: 10px;
		   border-top: 1px solid #d9d9d9;
		   border-right: 1px solid #d9d9d9;
		   transform:rotate(45deg);
	}
	.trade .mint-cell-title{position: relative;}
	.trade .mint-cell-title .mint-cell-text{ margin-left:4rem;}
	.trade .mint-cell .iconfont{ margin-right:1.2rem;font-size:1.4em;
	  position: absolute; top:-0.4rem;left:0; 
	  background:#ccc;
	  padding: 0.2rem; text-align: center;
	  color: #fff;
	  border-radius: 5px;
	  display: block;
	  overflow: hidden;
      width: 2rem;
	}
	.trade .trade-tab .mint-cell:first-child{
		    background-image: -webkit-linear-gradient(bottom, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-size: 100% 1px;
		    background-repeat: no-repeat;
		    background-position: top;
     }
     
     .trade .tabs-content .divTab .tabs-bar {
     	min-height: 45px;
		border-bottom: 1px solid #CECECE;
		position: fixed;
		top:11.6rem;;
		width: 100%;
		z-index: 999;
		background: #FFFFFF;
	}
	
	.trade .tabs-content .divTab .trade-show-tab{position: relative;
		top:11.7rem;}
	
	.trade .mint-loadmore-content {margin-top: 19rem;}
	
	.trade .tabs-content .divTab .tabs-bar .tabs-bar-nav {
		display:table; 
		min-height: 45px;
		width: 100%;
		height: inherit;
		position: absolute;
	}
	
	.trade .tabs-content .divTab .tabs-bar .tabs-bar-nav .tabs-tab {
		vertical-align:middle;   
  		display:table-cell;
		font-size: 1.2rem;
		position: relative;
		box-sizing: border-box;
		text-align: center;
		min-height: 45px;
		cursor: pointer;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	
	.trade .tabs-content .divTab .tabs-bar .tabs-bar-nav .tabs-active {
		font-size: 1.2rem;
		border-bottom: 1px solid #007AFF;
		color: #007AFF;
	}
	.trade .tabs-content .divTab .tabs-min-content {
		position: relative;
		width: 100%;
		padding: 0 2px;
		box-sizing: border-box;
		background: #fff;
		bottom: 45px;
	}
	
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li {
		border-bottom: 1px solid #eee;
		padding: 1rem 0;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .item-box{
		border: 1px solid #E7E1CD;min-height: 25px;width: 100%;padding: 0 10px;box-sizing: border-box;
		-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
background-color: #EEF1F6;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li h2 {
		font-size: 1.4rem;
	}
	
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .item-box .top{
		border-bottom: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .item-box .content{
		min-height: 45px;width: 100%;display: table;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .item-box .bottom{
		border-top: 1px solid #CECECE;min-height: 30px;width: 100%;display: table;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .left {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
	}
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li .right {
		vertical-align:middle;   
  		display:table-cell;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		text-align: right;
	}
	
	
	
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li p {
		margin: 5px auto;
	}
	
	.trade .tabs-content .divTab .tabs-min-content .divTab .table-min-box li h3 {
		font-weight: 700;
	}
	.trade .mint-button--small {
		  display: inline-block;
		  font-size: 14px;
		  padding: 0 12px;
		  height: 20px;
		}
	.trade .mint-button--normal {
		font-size: 14px;
		 height: 30px;
	}
</style>
<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import imageView from 'vue-imageview'
	import { Indicator, Cell,MessageBox,Loadmore,Toast} from 'mint-ui';
	export default {
		data() {
			return {
				isImage:false,
				upload: 'this.src="' + require('../../../kbc/h5/img/css/index/160926181522464.jpg') + '"',
				// 图片数组
		        imgArr: ['/kbc/img/test/160926181522464.jpg'],
		        // 显示组件
		        show: false,
		        // 从哪一张图片开始
		        imageIndex: 0,
		        
		        popupVisible2:false, //隐藏打款凭证
				popupVisible1: false,//显示买家/卖家信息
				nowIndex: 0, //默认第一个tab为激活状态
				tabsParam: [{'name': '我要交易'}, {'name': '我的委托'}, {'name': '我的成交'}], 
				dIndex:0,
				dTabsParam: [{'name': '买入委托记录'}, {'name': '卖出委托记录'}, {'name': '历史委托记录'}], 
				doneIndex:0,
				doneTabsParam: [{'name': '买家交易确认'}, {'name': '卖家交易确认'}, {'name': '成交记录'},{'name': '违约记录'}], 
				Page: 1,
				type: 1,
				memberId:'',
				allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
				isShow: false,
				items: [],
				ditems: [],
				currentPage: '0',
				totalPage: '0',
				matchingStatus:'',
				scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
			}
		},
		created() {
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 1;
		},
		components: {
			Cell,
			MessageBox,
			Toast,
			imageView,
			Loadmore
		},
		methods: {
			total: function(a,b){ //卖出输入时计算
				var res = 0.0;
				if(!util.isEmpty(a)&&!util.isEmpty(b)){
					res = (Number(a)*Number(b)).toFixed(2);
				}
				return res;
			},
			go: function(url,data,flag) {
				util.pushRouter(router, url, {"item":data,"flag":flag});
			},
			//查看图片==start
			showImgView () {
		        this.show = true
		    },
		    hideImageView () {
		        this.show = false
		    },
		    selectImg (index) {
		        this.show = true
		        this.imageIndex = index
		    },
		      //查看图片==end
			toggleTabs: function(index) { //交易中心主菜单
				this.nowIndex = index;
				//初始化值
//				this.items = [];
				if(index == 1){ //初始化第二个tab
					this.getDelegateToggleList(this.dIndex+1);
				}else if(index == 2){//初始化第三个tab
					this.getDoneToggleList(this.doneIndex+1);
				}
			},
			delegateToggleTabs: function(index) {//我的委托 tab子菜单
				this.isShow = false;
				this.dIndex = index;
				this.items = [];
				this.Page = 1;
				this.type = index + 1; //切换委托记录 type 1：买入委托记录，2：卖出委托记录，3：历史委托记录
				this.getDelegateToggleList(this.dIndex+1);
			},
			getDelegateToggleList: function(type) { //委托记录
				let $this = this;
				var url = "";
				if(type==1){//买入委托记录
					url = '/kbc/trade/toTradeBuyRecord';
				}else if(type==2){//卖出委托记录
					url = '/kbc/trade/toTradeSellRecord';
				}else{//历史委托记录
					url = '/kbc/trade/toTradeHistoryRecord';
				}
				$this.allLoaded = false;
				util.Ajax(url, "GET", {"page": $this.Page}, function(data) { //成功
					if(data) {
						console.log(data);
						if(data.code == "0") {
							$this.isShow = false;
							$this.totalpage = data.totalPage;
							$this.cuurPage = data.currentPage;
							if($this.totalpage < $this.cuurPage) {
								$this.allLoaded = true;
								$this.$refs.loadmore1.onBottomLoaded();
							} else {
								$this.items = data.items;
							}
							$this.$nextTick(function() {
								// 是否还有下一页，加个方法判断，没有下一页要禁止上拉
								$this.scrollMode = "touch";
								$this.isHaveMore();
							});
							if($this.totalpage == 0){//是否有数据
								$this.isShow = true;
								return;
							}
						}
					}
				});
			},
			buyCancel: function(id){ //买入委托取消
				let $this = this;
				MessageBox.confirm("是否确定取消委托？").then(action => {
					util.Ajax('/kbc/trade/toTradeBuyCancel', "GET", {"id": id}, function(data) { //成功
						if(data) {
							if(data.code == "0") {
								Toast("取消成功！");
								$this.items = [];
								$this.getDelegateToggleList(1);
							}else{
								Toast(data.msg);
							}
						}
					})
				});
			},
			sellCancel: function(id){ //卖出委托取消
				let $this = this;
				MessageBox.confirm("是否确定取消委托？").then(action => {
					util.Ajax('/kbc/trade/toTradeSellCancel', "GET", {"id": id}, function(data) { //成功
						if(data) {
							if(data.code == "0") {
								Toast("取消成功！");
								$this.items = [];
								$this.getDelegateToggleList(2);
							}else{
								Toast(data.msg);
							}
						}
					})
				});
			},
			doneToggleTabs: function(index) {//我的成交 tab子菜单
				this.isShow = false;
				this.doneIndex = index;
				this.ditems = [];
				this.Page = 1;
				this.type = index + 1; //切换成交记录 type 1：买方交易确认，2：卖方交易确认，3：成交记录，4：违约记录
				this.getDoneToggleList(this.doneIndex+1);
			},
			getDoneToggleList: function(type) { //成交记录 
				let $this = this;
				$this.allLoaded = false;
				util.Ajax('/kbc/trade/tradeSureList?tradetype='+type+'&page='+$this.Page, "GET", {}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							console.log(data)
							$this.isShow = false;
							$this.totalpage = data.totalPage;
							$this.cuurPage = data.currentPage;
							if($this.totalpage < $this.cuurPage) {
								$this.allLoaded = true;
								$this.$refs.loadmore1.onBottomLoaded();
							} else {
								$this.ditems = data.items;
//								for(var i in data.walletHistoryMap.walletHistory) {
//									data.walletHistoryMap.walletHistory[i].payType = util.payTyeName(data.walletHistoryMap.walletHistory[i].payType);
//									$this.items.push(data.walletHistoryMap.walletHistory[i]);
//								}
							}
							$this.$nextTick(function() {
								// 是否还有下一页，加个方法判断，没有下一页要禁止上拉
								$this.scrollMode = "touch";
								$this.isHaveMore();
							});
							
							if($this.totalpage == 0){//是否有数据
								$this.isShow = true;
								return;
							}
						}
					}
				});
			},
			popCancel:function(id){//确认打款
				MessageBox.confirm("是否确定取消委托？").then(action => {
					Toast("确认打款！"+id);
				});
			},
			onFileChange(e) { //头像处理 在提交的方法里，通过 this.isImage 即可
				var files = e.target.files || e.dataTransfer.files;
				if (!files.length)return;
				this.createImage(files[0]);
			  },
			createImage(file) {
			  var isImage = new Image();
			  var reader = new FileReader();
			  var vm = this;
			  reader.onload = (e) => {
			    vm.isImage = e.target.result;
			  };
			   reader.readAsDataURL(file);
			},
			loadTop() { //下拉刷新
				//下拉加载
				this.items = [];
				this.Page = 1;
				if(this.nowIndex == 1){
					this.getDelegateToggleList(this.type);
					this.$refs.loadmore1.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
				}/*else if(this.nowIndex == 2){
					this.getDoneToggleList(this.type);
					this.$refs.loadmore2.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
				}*/
				
			},
			loadBottom() { //上拉加载更多数据
				this.Page += 1;
				if(this.nowIndex == 1){
					this.getDelegateToggleList(this.type);
					this.$refs.loadmore1.onBottomLoaded(); // 加载更多数据
				}/*else if(this.nowIndex == 2){
					this.getDoneToggleList(this.type);
					this.$refs.loadmore2.onTopLoaded(); // 加载更多数据
				}*/
			},
			
			loadTop2() { //下拉刷新
				//下拉加载
				this.ditems = [];
				this.Page = 1;
				this.getDoneToggleList(this.type);
				this.$refs.loadmore2.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
				
			},
			loadBottom2() { //上拉加载更多数据
				this.Page += 1;
				this.getDoneToggleList(this.type);
				this.$refs.loadmore2.onTopLoaded(); // 加载更多数据
			},
			isHaveMore: function() {
				// 是否还有下一页，如果没有就禁止上拉刷新
				//this.allLoaded = false; //true是禁止上拉加载
				if(this.cuurPage == this.totalpage) {
					Toast("没有更多数据了...");
					this.allLoaded = true;
				}
			},
			reStatusValue: function(code){ //我的委托状态
				if(code=="1"){
					return "匹配中";
				}else if(code=="2"){
					return "已匹配";
				}else if(code=="5"){
					return "已取消";
				}else if(code=="4"){
					return "已结束";
				}else{
					return "匹配中";
				}
			},
			getStatusValToBuy: function(code){ //我的成交状态，买方交易确认-状态
				if(code=='1'){
					return "匹配中";
				}else if(code=='2'){
					return "已匹配";
				}else if(code=='3'){
					return "已打款";
				}else if(code=='4'){
					return "已完成";
				}else if(code=='5'){
					return "已撤销";
				}else{
					return code;
				}
			},
			getStatusValToSell: function(code){ //我的成交状态，卖方交易确认-状态
				if(code=='1'){
					return "匹配中";
				}else if(code=='2'){
					return "已匹配";
				}else if(code=='3'){
					return "已打款";
				}else if(code=='4'){
					return "已完成";
				}else{
					return code;
				}
			}
		},
	    computed: {
	    	
       	},
		mounted: function() { 
			let $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.memberId = data.member.id;
					} else {
						Toast(data.msg);
					}
				}
			});
						
			//获取服务器图片地址路径
			util.Ajax('/kbc/trade/initPage', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.$store.state.imgUrl = data.data;
						localStorage.setItem("imgUrl", data.data);
					} else {
						$this.$store.state.imgUrl = "";
						Toast("获取服务器地址出错！");
					}
				}
			})
//			let $this = this;
//			this.getTeamList($this.type);
			this.getDelegateToggleList(1);
			this.getDoneToggleList(1);
		}
	}




</script>
